<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .number-card {
          width: 200px;
          height: 200px;
          border: 2px solid #000;
          margin: 50px auto;
          position: relative;
          /* 设置透视距离，让卡片有3D效果 */
          perspective: 500px;
        }
      
        .number-card::before {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          background-color: #666;
          /* 分隔线相对父元素绝对定位在容器中间 */
          position: absolute;
          top: calc(50% - 1px);
          left: 0;
          /* 设置 z-index的值大一些，确保线条在所有卡片之上 */
          z-index: 99;
        }
      
        .card {
          width: 100%;
          height: 50%;
          background-color: #ddd;
          /*  省略部分css  ，具体见前面 .... */
          position: absolute;
          left: 0;
          top: 0;
          /* 字体大小 */
          font-size: 150px;
          /* 水平居中 */
          text-align: center;
          line-height: 200px;
          /* 将行高设为 200px ，这样文字垂直方向中心就对齐了容器中心 */
          overflow: hidden;
        }
      
        .card1-down {
          /* 向下移动50%的高度 */
          top: 50%;
          line-height: 0;
          /* 设置旋转的原点为顶部中心 */
          transform-origin: top center;
          /* 向止旋转 180deg */
          transform: rotateX(180deg);
          /* 元素背面朝向用户时，不可见 */
          backface-visibility: hidden;
          /* 添加过渡动画 */
          transition: transform 0.5s;
          z-index: 10;
        }
      
        /* 鼠标移入后效果 */
        .number-card:hover .card1-down {
          transform: rotateX(0deg);
        }
      
        .card2-up {
          /* 省略部分css ，具体见前面......*/
          /* 添加过渡动画 */
          transition: transform 0.5s;
          /* 旋转中心为 底部中心 */
          transform-origin: bottom center;
          backface-visibility: hidden;
        }
      
        .number-card:hover .card2-up {
          transform: rotateX(-180deg);
          /* x 轴反方向旋转 180deg */
        }
      
        .card2-down {
          /* 向下移动50%的高度 */
          top: 50%;
          line-height: 0;
        }
      </style>
</body>
</html>